<template>
	<div class="top">
		<div class="left">
			<h2>今天,</h2>
			<p>
				{{ dayjs(nowTime).format("YYYY年MM月DD日") }}周{{
					day
				}},欢迎您回到后台操作系统,今日累计销售59件商品,继续加油~
			</p>
		</div>
		<div class="right">
			<div class="one op" @click="inStorage(0)">
				<div>
					<component is="PartlyCloudy" style="width: 30px; height: 30px" />
				</div>
				<div>
					<span>25</span>
					<i>待入库</i>
				</div>
			</div>
			<div class="two op" @click="inStorage(1)">
				<div>
					<component is="Document" style="width: 30px; height: 30px" />
				</div>
				<div>
					<span>25</span>
					<i>待审核</i>
				</div>
			</div>
			<div class="three op" @click="inStorage(2)">
				<div>
					<component is="Printer" style="width: 30px; height: 30px" />
				</div>
				<div>
					<span>25</span>
					<i>待提现</i>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";

// /sale/list
const router = useRouter();

//当前时间
const nowTime = ref(new Date());
//存储星期几
const day = ref("");

//转换星期
onBeforeMount(() => {
	day.value = dayjs().day();
	switch (day.value) {
		case 1:
			day.value = "一";
			break;
		case 2:
			day.value = "二";
			break;
		case 3:
			day.value = "三";
			break;
		case 4:
			day.value = "四";
			break;
		case 5:
			day.value = "五";
			break;
		case 6:
			day.value = "六";
			break;
		case 0:
			day.value = "日";
			break;
	}
});

//跳转函数
/**
 * inStorage
 * 页面跳转函数
 * 接收不通值跳转对应页面
 * @param {number} num
 */
function inStorage(num) {
	if (num === 0) {
		router.push("/selection/list");
	} else if (num === 1) {
		router.push("/sale/list");
	} else if (num === 2) {
		router.push("/finance/list");
	}
}
</script>

<style lang="less" scoped>
.top {
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	.left {
		height: 100px;
		width: 880px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		p {
			font-size: 12px;
		}
	}
	.right {
		height: 100px;
		width: 450px;
		display: flex;
		align-items: center;
		font-size: 12px;
		position: relative;

		span {
			font-size: 16px;
		}
		.one {
			display: flex;
			cursor: pointer;
			margin-right: 60px;
			:first-child {
				margin-right: 5px;
			}
			div {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
		.two {
			display: flex;
			cursor: pointer;
			margin-right: 60px;
			:first-child {
				margin-right: 5px;
			}
			div {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
		.three {
			cursor: pointer;
			display: flex;
			:first-child {
				margin-right: 5px;
			}
			div {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
}
</style>
